/**
 * @Author: easten
 * @Created: 2024-04-15 23:29:48
 * @Description:
 *
 */
import classnames from "classnames";
import React, { useState, useEffect } from "react";
import { RefreshIcon } from "tdesign-icons-react";
import { Button, Popconfirm, Space, Table, Tag, message } from "tdesign-react";
import { ModuleCommonProps, PageParams } from "_common/DataType";
import { IotAttr } from "_common/entity";
import { ApiAttr } from "_common/api/iot";
import { TableTitle } from "components";
import AttrDrawer from "./AttrDrawer";
const IotAttrComp: React.FC<ModuleCommonProps> = (props: ModuleCommonProps) => {
  const { axios, className } = props;
  const [selectedRowKeys, setSelectedRowKeys] = useState<(string | number)[]>([
    1, 2,
  ]);
  const [loading, setLoading] = useState<boolean>(false);
  const [attrList, setAttrList] = useState<IotAttr[]>([]);
  const [selectedRow, setSelectedRow] = useState<IotAttr>();
  const [userName, setAttrName] = useState<string>();
  const [pageState, setPageState] = useState<PageParams>({
    pageNum: 1,
    pageSize: 10,
    total: 0,
  });

  const [visible, setVisible] = useState(false);
  const [edit, setEdit] = useState(false);
  const apiAttr = new ApiAttr(axios);

  function onSelectChange(value: (string | number)[]) {
    setSelectedRowKeys(value);
  }

  useEffect(() => {
    getAttrList();
  }, [userName]);

  const getAttrList = async () => {
    const response = await apiAttr.getPageList({
      ...pageState,
      userName,
    });
    if (response && response.code == 200 && response.data) {
      setAttrList(response.data.list);
      setPageState({
        ...pageState,
        total: response.data.total,
      });
    }
  };

  // 删除用户
  const deleteAttr = async (id: number) => {
    const response = await apiAttr.deleteAttr(id);
    if (response && response.code == 200 && response.data) {
      message.success("删除成功");
      getAttrList();
    }
  };

  return (
    <div className={classnames(className)}>
      <div className="flex flex-row justify-between mb-4">
        <TableTitle text="属性列表" />
        <Space size={5}>
          <Button
            onClick={() => {
              setVisible(true);
              setEdit(false);
            }}
          >
            添加属性
          </Button>
          <Button
            icon={<RefreshIcon />}
            variant="outline"
            onClick={() => {
              getAttrList();
            }}
          ></Button>
        </Space>
      </div>
      <Table<IotAttr>
        bordered
        columns={[
          {
            align: "left",
            width: 80,
            ellipsis: true,
            colKey: "index",
            title: "序号",
            cell: ({ rowIndex }) => {
              let _index =
                (pageState.pageNum - 1) * pageState.pageSize + rowIndex + 1;
              return <span>{_index}</span>;
            },
          },
          {
            align: "left",
            ellipsis: true,
            colKey: "attrName",
            title: "属性名称",
          },
          {
            align: "left",
            ellipsis: true,
            colKey: "attrCode",
            title: "属性编码",
          },
          {
            align: "center",
            ellipsis: true,
            colKey: "unit",
            title: "单位",
          },
          {
            align: "center",
            ellipsis: true,
            colKey: "dataType",
            title: "数据类型",
            cell({ row }) {
              return (
                <Tag theme="success" variant="outline">
                  {row.dataType ?? "--"}
                </Tag>
              );
            },
          },
          {
            align: "left",
            ellipsis: true,
            colKey: "remark",
            title: "备注",
          },
          {
            align: "center",
            fixed: "right",
            width: 220,
            colKey: "op",
            title: "操作",
            cell({ row }) {
              return (
                <>
                  <Button
                    theme="success"
                    variant="text"
                    onClick={() => {
                      setVisible(true);
                      setEdit(true);
                      setSelectedRow(row);
                    }}
                  >
                    编辑
                  </Button>
                  <Popconfirm
                    content="确认删除吗"
                    destroyOnClose
                    placement="top"
                    showArrow
                    theme="default"
                    onConfirm={() => deleteAttr(row.id)}
                  >
                    <Button theme="primary" variant="text">
                      删除
                    </Button>
                  </Popconfirm>
                </>
              );
            },
          },
        ]}
        loading={loading}
        data={attrList}
        rowKey="index"
        selectedRowKeys={selectedRowKeys}
        verticalAlign="middle"
        hover
        onSelectChange={onSelectChange}
        pagination={{
          pageSize: pageState.pageSize,
          total: pageState.total,
          current: pageState.pageNum,
          showJumper: true,
          onCurrentChange(current) {
            setPageState({
              ...pageState,
              pageNum: current,
            });
          },
          onPageSizeChange(size) {
            setPageState({
              ...pageState,
              pageSize: size,
            });
          },
        }}
      />
      <AttrDrawer
        open={visible}
        axios={axios}
        edit={edit}
        value={selectedRow}
        onSuccess={() => {
          setVisible(false);
          getAttrList();
        }}
      />
    </div>
  );
};
export default IotAttrComp;
